<template>
  <view class="container">
    <view class="title">隐私协议</view>
    <view v-if="sections && sections.length" class="content">
      <view v-for="(section, index) in sections" :key="index" class="section">
        <view class="section-title">{{ section.title }}</view>
        <view class="section-content">{{ section.content }}</view>
      </view>
    </view>
    <view v-else class="empty">加载中...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sections: [
        { title: "一、信息收集", content: "我们会在用户使用我们的服务时收集用户的个人信息。这些信息包括但不限于：用户的姓名、联系方式、地址、支付信息等。" },
        { title: "二、信息使用", content: "我们会将收集到的信息用于以下用途：1. 提供和改进我们的服务；2. 处理用户的订单和支付；3. 进行客户服务和反馈；4. 向用户发送与服务相关的信息和通知；5. 满足法律法规的要求。" },
        { title: "三、信息共享", content: "我们不会向第三方分享用户的个人信息，除非：1. 得到用户的明确同意；2. 为提供用户请求的产品和服务所必需；3. 根据法律法规的要求；4. 为保护我们的合法权益。" },
        { title: "四、信息安全", content: "我们将采取合理的措施保护用户的个人信息，防止信息的丢失、滥用和未经授权的访问、披露、篡改或破坏。" },
        { title: "五、信息保存", content: "我们将根据法律法规的要求和业务需要，保留用户的个人信息。用户有权请求我们删除其个人信息，但法律法规另有规定的除外。" },
        { title: "六、隐私协议的变更", content: "我们有权根据实际情况修改本隐私协议的内容，并在平台上公布更新后的协议条款。用户继续使用我们的服务即表示同意受修改后的协议约束。" },
        { title: "七、联系我们", content: "如果用户对本隐私协议有任何疑问或建议，请通过以下方式联系我们：联系方式：962720365" }
      ]
    };
  }
};
</script>

<style>
/* 根元素样式，防止页面左右滑动 */
.container {
  overflow-x: hidden;
  padding: 20px;
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

/* 内容样式 */
.content {
  font-size: 16px;
  line-height: 1.5;
}

/* 段落样式 */
.section {
  margin-bottom: 20px;
}

/* 段落标题样式 */
.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 段落内容样式 */
.section-content {
  margin-left: 10px;
}

/* 空内容样式 */
.empty {
  text-align: center;
  font-size: 16px;
  color: #888;
}
</style>
